<template>
	<up-navbar title="我的" bgColor="rgba(0,0,0,0)" :autoBack="true" titleStyle="color: #000000"></up-navbar>
	<view class="content">
		<view class="avatar-name" @click="$path.navigateTo('/pages/login/login')">
			<button v-if="userinfo.user_id" class="bt-tx" @click.stop='chooseavatar'>获取头像</button>
			<image class="avatar" :src="userinfo.headimgurl || '/static/logo.png'" mode=""></image>

			<view class="name-cont">
				<view class="name">{{ userinfo.nickname || '未登录'}}</view>
				<view class="level">
					<image src="/static/vip-icon.png" mode=""></image>
					<text>{{userinfo.user_id? vip_index : '----'}}</text>
				</view>
			</view>
		</view>

		<view class="identity">
			<view class="i-tit">
				<text>合伙人</text>
				<text>加入合伙人 赚取更多佣金</text>
			</view>
			<view class="i-btn">立即加入</view>
			<image class="i-bj" src="/static/identity-bj.png" mode=""></image>
		</view>

		<image class="content-bj" src="/static/content-bj.png" mode=""></image>
	</view>

	<view class="title">服务工具</view>
	<view class="service-box">
		<view class="service-item"
			v-for="(item,index) in service"
			@click="jump(item)">
			<button v-if="userinfo.user_id && item.name == '在线客服'"
				open-type="contact"
				class="btn-kf">联系客服</button>

			<image :src="`/static/u${index + 1}.png`" mode=""></image>
			<view>{{item.name}}</view>
		</view>
	</view>
</template>

<script setup>
	import { onShow } from '@dcloudio/uni-app'
	import { computed, reactive } from 'vue';
	import api from '../../api/api';
	import { useCounterStore } from '../../stores/user';
	import { storeToRefs } from 'pinia'
	const user = useCounterStore()
	const { userinfo } = storeToRefs(user)

	const vip_index = computed(() => {
		let arr = ['普通用户', '会员', '创客', '联创']
		return arr[userinfo.value.vip_index]
	})

	const service = reactive([{
		name: '我的钱包',
		path: '/pages/capital/capital'
	}, {
		name: '我的推广',
		path: '/pages/promotion/promotion'
	}, {
		name: '能源额度',
		path: '/pages/energy/energy'
	}, {
		name: '个人信息',
		path: '/pages/information/information'
	}, {
		name: '订单记录',
		path: '/pages/order/order'
	}, {
		name: '在线客服',
		path: ''
	}, {
		name: '积分明细',
		path: '/pages/integral/integral'
	}, {
		name: '关于平台',
		path: ''
	}])

	function jump(item) {
		if (!userinfo.value.user_id) return uni.$showMsg("未登录")
		if (item.name == "在线客服") return
		if (!item.path) return uni.$showMsg("功能暂未开放")
		api.navigateTo(item.path)
	}

	/* 获取头像 */
	function chooseavatar(e) {
		uni.chooseImage({
			count: 1,
			sizeType: ['original'],
			sourceType: ['album'],
			success: function(res) {
				uni.uploadFile({
					url: https + '/api/index/file_up', //仅为示例，非真实的接口地址
					filePath: res.tempFilePaths[0],
					name: 'file',
					success: (res) => {
						if (JSON.parse(res.data).code !== 200) return uni.$showMsg('上传失败!')
						api.user.update_user_data({
							nickname: userStore.userinfo.nickname,
							head_img: JSON.parse(res.data).data.src
						}).then(res => {
							uni.$showMsg("修改成功!")
							setTimeout(() => {
								api.switchTab('/pages/user/user')
							}, 1000)
						})
					}
				});
			}
		});
	}

	onShow(() => {
		if (userinfo.value.user_id) user.setInfo()
	})
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		padding: 0 32rpx;
		padding-top: 200rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		height: 496rpx;
		background-image: linear-gradient(180deg, #FFDFB8 0%, #e3f7ff00 100%);

		.avatar-name {
			display: flex;
			align-items: center;
			z-index: 2;
			position: relative;

			.bt-tx {
				width: 100%;
				position: absolute;
				top: 40rpx;
				left: 0;
				opacity: 0;
			}

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.name-cont {
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				color: #FFFFFF;

				.name {
					font-size: 28rpx;
					color: #333333;
				}

				.level {
					max-width: 190rpx;
					height: 48rpx;
					border-radius: 20rpx;
					background-color: rgba(181, 181, 181, 0.3);
					font-size: 24rpx;
					color: #fff;
					display: flex;
					align-items: center;
					padding: 0 20rpx;
					margin-top: 20rpx;

					image {
						width: 34rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}
				}
			}
		}

		.identity {
			position: absolute;
			bottom: 0;
			left: 32rpx;
			width: 686rpx;
			height: 160rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			padding-bottom: 20rpx;

			>view {
				z-index: 9;
				color: #fff;
			}

			.i-tit {
				display: flex;
				flex-direction: column;
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: 600;

				>text:nth-child(2) {
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					margin-top: 20rpx;
				}
			}

			.i-btn {
				width: 160rpx;
				height: 52rpx;
				line-height: 52rpx;
				background: #F6941D;
				border-radius: 32rpx;
				text-align: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}

			.i-bj {
				width: 100%;
				height: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}

		.content-bj {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 30rpx;
		}
	}

	.title {
		margin-top: 32rpx;
		font-size: 32rpx;
		font-weight: 600;
		padding: 0 32rpx;
	}

	.service-box {
		width: 686rpx;
		margin-left: 32rpx;
		margin-top: 32rpx;
		display: flex;
		flex-wrap: wrap;

		.service-item {
			width: 25%;
			font-size: 28rpx;
			color: #333333;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 52rpx;
			position: relative;

			image {
				width: 60rpx;
				height: 60rpx;
				margin-bottom: 22rpx;
			}

			.btn-kf {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
			}
		}
	}
</style>